<template>
    <div class="Special">
        <div class="title">
            <div>
                <img src="../assets/img/i_icon_btbq.png" alt="" />
                <span>活动</span>
            </div>
            <a @click="$router.push({ path: '/Actives' })">查看更多</a>
        </div>

        <ul class="list">
            <li
                v-for="(item, index) in list"
                :key="index"
                @click="
                    $router.push({
                        path: '/ActiveDetial',
                        query: { id: item.id },
                    })
                "
                :style="index == 1 ? 'margin-bottom:0;' : ''"
            >
                <dl>
                    <dd>
                        <img :src="item.cover_image_url" alt="" />
                        <img
                            class="hot"
                            src="../assets/img/i_icon_redsanjiao.png"
                            alt=""
                        />
                    </dd>
                    <dt>
                        <h1>{{ item.title }}</h1>
                        <h2>{{ item.ongoing_status }}</h2>
                        <h3>
                            活动时间 {{ item.start_date }} - {{ item.end_date }}
                        </h3>
                    </dt>
                </dl>
            </li>
        </ul>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'SpeCial',
    props: {
        msg: String,
    },
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            axiosGet(
                'api/activities',
                {
                    page: 1,
                    limit: 2,
                },
                (res) => {
                    console.log(res);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }

                    this.list = res.data.list;
                }
            );
        },
    },
};
</script>
<style scoped lang="scss">
.list {
    padding-top: 10px;
    li {
        overflow: hidden;
        margin: 0 0 20px;
        width: 100%;
        cursor: pointer;
        dl {
            display: flex;
            justify-content: flex-start;

            dd {
                width: 175px;
                max-height: 120px;
                overflow: hidden;
                position: relative;
                img {
                    width: 100%;
                    transition: all 1s;
                }
                img:hover {
                    transform: scale(1.2);
                }
                .hot {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 39px;
                }
            }

            dt {
                width: 222px;
                overflow: hidden;
                margin-left: 19px;
                text-align: left;

                h1 {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #262626;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 6px;
                }

                h1:hover {
                    color: #e60012;
                }

                h2 {
                    font-size: 12px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #a7a7a7;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    text-align: left;
                    margin-top: 9px;
                    min-height: 65px;
                }

                h3 {
                    font-size: 12px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #a7a7a7;
                }
            }
        }
    }
}
</style>
